.flexible(@width,@value){
    @{value}:@width/100rem;
}

.margin(@width){
    margin:@width/100rem auto;
}

.margin-space(@top,@left){
    margin:@top/100rem @left/100rem;
}

.padding-space(@top,@left){
    padding:@top/100rem @left/100rem;
}
.border-radius(@num1, @num2){
    border-radius:@num1/100rem @num2/100rem;
}
.color(@color){
    color:@color;
}

.border(@type,@width:1px,@style:solid,@color:lightgrey){
    border-@{type}:@width @style @color;
}

.border-box(@style:solid , @width:1px , @color:#ccc){
    border: @arguments;
}

.border-none(){
    border:none;
}


.box-shadow(@num1,@num2,@num3,@color){
    box-shadow:@num1/100rem @num2/100rem @num3/100rem @color;
}

.width(){
    width:100%;
}

.block(){
    display:block;
}

.inline-block(){
    display:inline-block;
}

.textalign(){
    text-align:center;
}

.flex(){
    display:flex;
}

.flex-justify(){
    justify-content:space-between;
}

.flex-align(){
    align-items:center;
}

.background(@src){

    background:url("../images/icon/@{src}") no-repeat;



};

.background-size(){
    background-size:100%;
};

.backgroundSize(@per1,@per2){
    background-size:@per1 @per2;
};

.background-none(){
    background:none;
}

.box-sizing(){
    box-sizing:border-box;
};



//px换算rem
.fn-px-rem(@type,@wh){
    @{type}: @wh/200rem;
}

.cursor(){
    cursor: pointer;
}

.letter-spacing(@width){
    letter-spacing:@width/100rem;
}

.font-weight(){
    font-weight:bold;
}

.position-footer(){
    position:fixed;
    bottom:0;
    left:0;
    z-index:99;
}



/*骨架屏*/
.skeleton(){
    .skeleton{
        position: relative;
        overflow: hidden;
        border: none !important;
        border-radius: 5px;
        background-image: none !important;
        background-color: #EBF1F8 !important;
        text-indent:-9999px;/*文字隐藏*/
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          z-index: 9;
          width: 100%;
          height: 100%;
          background-image: none !important;
          background-color: #EBF1F8;
          border-bottom:1px solid #EBF1F8;
          display: block;
        }
         
        /* 下面这部分都是自定义的，看需求修改 */
        &:not(.not-round)::after {
          border-radius: 4px;
        }
        &:not(.not-before)::before {
          position: absolute;
          top: 0;
          width: 30%;
          height: 100%;
          content: "";
          background: linear-gradient(to right,rgba(255,255,255,0) 0,
              rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
          transform: skewX(-45deg);
          z-index: 99;
          animation: skeleton-ani 1s ease infinite;
          display: block;
        }
        &.badge {
          &::after {
            background-color: #F8FAFC;
            border-bottom:1px solid #F8FAFC;
          }
        }
      }
    }
     
    @keyframes skeleton-ani { /* 骨架屏动画 */
      from {
        left: -100%;
      }
      to {
        left: 150%;
      }
    
}